<template>
    <div class="home">
      <Header/>
      <div class="content"> 
        <div class="title">{{$t('m.我的社区')}}</div>
        
     <div class="price">
        <div class="card">
      <div class="titles">{{$t('m.我的邀请连接')}}</div>
      <div class="box">
        <div class="link" v-if="userInfo.lastBookingTime!=0">{{codeWallet}}</div> 
        <div class="tips" v-if="userInfo.lastBookingTime==0">{{$t('m.swjryy')}}</div>        
      </div>  
      <div class="buttom" v-if="userInfo.lastBookingTime!=0">
        <button
            type="button"
            class="fuzhi btn act"
            v-clipboard:copy="codeWallet"
            v-clipboard:success="onCopy"
            v-clipboard:error="onError"
          >
          {{$t('m.fz')}}
          </button>     
      </div>   
      <div class="box">
        <div class="cont">
         <div class="ibox">
          <div class="txts">{{$t('m.wdtjdz')}}</div>
          <div class="rbox">
            <div class="txt">{{inviter | yingcang}}</div>
          </div>
         </div>
        </div></div>  
     </div>
  <div class="mbox">
  <div class="items">
    <div class="txt"> {{$t('m.直推邀请')}}</div>
    <div class="num">{{myNum}}</div>
  </div>
  <div class="items m16">
    <div class="txt"> {{$t('m.社区成员')}} </div>
    <div class="num">{{tameNum}}</div>
  </div>
</div>
  <div class="mbox">
  <div class="items">
    <div class="txt">{{$t('m.个人算力')}} </div>
    <div class="num">{{dexc(info.r1)}}</div>
  </div>
  <div class="items m16">
    <div class="txt"> {{$t('m.总质押')}} </div>
    <div class="num">{{dexc(info.r2)}} FPC</div>
  </div>
</div>
<div class="mbox">
  <div class="items">
    <div class="txt">{{$t('m.社区算力')}} </div>
    <div class="num">{{dexc(info.r5)}}</div>
  </div>
  <div class="items m16">
    <div class="txt"> {{$t('m.总稳定性债券')}} </div>
    <div class="num">{{dexc(info.r3)}} USDT</div>
  </div>
</div>
<div class="mbox">
  <div class="items">
    <div class="txt">{{$t('m.小区算力')}}</div>
    <div class="num">{{dexc(info.r6)}}</div>
  </div>
  <div class="items m16">
    <div class="txt"> {{$t('m.总流动性债券')}}</div>
    <div class="num">{{dexc(info.r4)}} USDT</div>
  </div>
</div>
<div class="mbox">
  <div class="items">
    <div class="txt">{{$t('m.社区有效业绩')}}</div>
    <div class="num">{{dexc(info.r7)}} USDT</div>
  </div>
  <div class="items m16">
    <div class="txt"> {{$t('m.小区有效业绩')}}</div>
    <div class="num">{{dexc(info.r8)}} USDT</div>
  </div>
</div>
</div>
<div class="price">
      <div class="stitle" >{{$t('m.我的邀请')}}</div>
      <div class="list"> 
      <div class="list-item">       
            <div v-for="(item, i) in list" :key="i"   class="">
              <div class="sitem" @click="toshow(item.userAddress,i,item.show)" :class="item.show?'acts':''">            
            <div class="tops">
              <div class="no">No.0{{i+1}}</div>
                    <div class="time">{{ item.userAddress | yingcang}}
                      <img src="../assets/img/icup.png" alt="" v-if="item.show" class="ico">
                      <img src="../assets/img/icdw.png" alt="" v-else class="ico">
                    </div>

                  </div>
             </div>
  
             <div class="moshow" v-if="item.show">
    <div class="mbox">
  <div class="items">
    <div class="txt">{{$t('m.个人算力')}} </div>
    <div class="num">{{dexc(item.info.r1)}}</div>
  </div>
  <div class="items m16">
    <div class="txt"> {{$t('m.总质押')}} </div>
    <div class="num">{{dexc(item.info.r2)}} FPC</div>
  </div>
</div>
<div class="mbox">
  <div class="items">
    <div class="txt">{{$t('m.社区算力')}} </div>
    <div class="num">{{dexc(item.info.r5)}}</div>
  </div>
  <div class="items m16">
    <div class="txt"> {{$t('m.总稳定性债券')}} </div>
    <div class="num">{{dexc(item.info.r3)}} USDT</div>
  </div>
</div>
<div class="mbox">
  <div class="items">
    <div class="txt">{{$t('m.小区算力')}}</div>
    <div class="num">{{dexc(item.info.r6)}}</div>
  </div>
  <div class="items m16">
    <div class="txt"> {{$t('m.总流动性债券')}}</div>
    <div class="num">{{dexc(item.info.r4)}} USDT</div>
  </div>
</div>
<div class="mbox">
  <div class="items">
    <div class="txt">{{$t('m.社区有效业绩')}}</div>
    <div class="num">{{dexc(item.info.r7)}} USDT</div>
  </div>
  <div class="items m16">
    <div class="txt"> {{$t('m.小区有效业绩')}}</div>
    <div class="num">{{dexc(item.info.r8)}} USDT</div>
  </div>
</div>
</div>
            </div>
              <div v-if="list.length==0"  class="noData">
                  <img src="../assets/img/logo.png" alt="" >
                  <div class="ttx">{{$t('m.mysj')}}</div>
                </div>
      </div>
    </div>
     </div>
    </div>
    <Bottom/>
</div>
</template>
<script>
import Header from '../components/header.vue';
import Bottom from '../components/bottom.vue';
import {getUserCuntData,getReferralsInfo,getMyteamCount,getinviter} from "@/api/Public";
import Web3 from 'web3'
export default {
  name: "myContracts",
  components: {Header,Bottom},
  data() {
    return {
        current:0,
        codeWallet: "?code=" + this.$store.getters.userWallet,
        loading:false,
        inviter:'',
        list:[],
        total:0,
        myNum:0,
        tameNum:0,
        finished:true,
        refreshing:false,
        userInfo:"",
        info:"",
        isOpen:true
    }
  },
  created(){
    this.getInfo()
    let baseUrl=((window.location.href).split("/#/"))[0]
    if(baseUrl.indexOf('?')){
        baseUrl= ((baseUrl).split("/?"))[0]
        this.codeWallet= baseUrl+"?code=" + this.$store.getters.userWallet   
    }else{
       this.codeWallet= baseUrl+"?code=" + this.$store.getters.userWallet
    }
  },
  filters: {
    yingcang(val) {
      if (val&&val!="0x0000000000000000000000000000000000000000") {
        let a = val.replace(/(\w{12})\w+(\w{12})/, "$1******$2");
        return a;
      } else {
        return "-/-";
      }
    },
  },
  methods:{
    dexc(val){
    if(val){
      let  ethereum = window.ethereum
    let web3s = new Web3(ethereum);
      let amount=  web3s.utils.fromWei(val +'', 'ether'); 
      // let num =val/Math.pow(10,18)
      return val?  Math.round(amount*1000000)/1000000:'0'
    }else{
      return 0
    }
    },
     getInfo() {
      let userWallet = this.$store.getters.userWallet

      if(userWallet){
        if(this.isOpen){
        getUserCuntData(userWallet).then(res=>{
          //console.log(res,'--------');
          this.info=res
        })
        }
        getReferralsInfo(userWallet).then(res=>{
          if(res){
          let data=res.map(el=>{
            return {userAddress:el}
          })
         this.list=data   
         this.myNum=res.length
          }
        })
       getMyteamCount(userWallet).then(res=>{
        // //console.log('num',res);
        this.tameNum=res
       })
       getinviter(userWallet).then(res=>{
        this.inviter=res
       })
      }
    },
    toshow(user,e,j){    
      if(!j){
      getUserCuntData(user).then(res=>{
        this.$set(this.list[e],'info',res)
        this.$set(this.list[e],'show',!j)
      })
      }else{
        this.$set(this.list[e],'show',!j)
      }
    },
    changer(e){
        this.current=e
    },
    onCopy() {
      this.$toast(this.$i18n.t("m.fzcg"));
    },
    onError() {
      this.$toast(this.$i18n.t("m.fzsb"));
    },
    async toPage(val) {    
     if(this.$store.getters.userWallet){
       this.$router.push({ path: val });
      }else{
        this.shows=true
      }
    },
  }
}

</script>
<style lang="scss" scoped>
@import "../../src/assets/scss/_handle.scss";

$t-mf: "PingFang";
$t-f: "DINAlternate-Bold";

.home {
  background:  #000000   no-repeat;
  // background: #161628;
  background-size:contain;
  background-position: center bottom;
  overflow-x: hidden;
  width: 750px;
  margin: 0 auto;
  min-height: 100vh;
    .content{
        margin-top: 188px;
        margin-bottom: 188px;
        .title{
      font-size: 48px;
      font-weight: bold;
      color: #ffffff;
      margin: 72px auto;
      padding: 22px;
      position: relative;
    }  
    .price{
      background: #130700;
      border-radius: 18px;
      min-height: 360px;
      width: 680px;
      margin: 16px auto;
      border: 2px solid #582204;
      overflow: hidden;
      padding: 0 24px 16px ;
      box-sizing: border-box;
      .stitle{
        font-size: 28px;
          font-weight: 600;
          color: #ffffff;
          padding: 30px 0;
          width: 100%;
          border-bottom: 1px solid #582204 ;
      }
      .box{
        height: 102px;
        width: 100%;
        border-radius:16px 16px 280px 16px ;
        display: flex;
        align-items: center;
        flex-direction: column;
        justify-content: center;
        margin: 40px auto;
        .txt{
          font-size: 28px;
          color: #A6A6A6;
        }
        .num{
          font-size: 48px;
          color: #FF7C36;
          font-weight: bold;
          margin-top: 10px;
        }
      }
      .mbox{
        display: table;
        justify-content: space-between;
        align-items: flex-start;
        border-spacing: 16px;
        border-collapse: separate;
        width: 100%;
      }
      .item{
        border-bottom: 1px solid #582204;
        width: calc(100% - 16px);
        min-height: 120px;
        display: flex;
        align-items: center;
        flex-direction: row;
        justify-content: space-between;
        margin:8px ;
        padding: 20px;
        box-sizing: border-box;
        .txt{
          font-size: 26px;
          color: #A6A6A6;
        }
        .num{
          font-size: 24px;
          color: #ffffff;
        padding-left: 8px;
        text-align: right;
        }
        .snum{
          font-size: 24px;
        color: #ffffff;
        padding-top: 8px;
        text-align: right;
        }
      }
      .items{
          border-radius: 26px;
        min-height: 160px;
        overflow: hidden;
        width: 50% ;
        display: table-cell;
        align-items: center;
        justify-content: center;
        flex-direction: column;
        margin: 8px ;
        padding: 40px 10px;
        box-sizing: border-box;
        border: 2px solid #582204;
        .txt{
          font-size: 24px;
          color: #A6A6A6;
        }
        .num{
          font-size: 24px;
        color: #ffffff;
        padding-left: 8px;
        margin-top: 16px;
        }
      }
      .actc{
        border: 1px solid #582204;
      }
    }
        .card {
          align-items: center;
      border-radius: 18px;
      min-height: 200px;
      margin: 20px 0px 20px;
      display: flex;
      justify-content: space-between;
      flex-direction: column;
      .titles{
        font-size: 28px;
          font-weight: 600;
          color: #ffffff;
          padding-bottom: 30px;
          width: 100%;
          border-bottom: 1px solid #582204 ;
      }
      
      .box{
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
        .link{
            margin:40px 26px 20px;
            font-size: 28px;
            white-space: normal;
            word-break: break-all;
            // background: linear-gradient(270deg, #F89C8A, #fb575f);
            background: #FF7C36;
            // background: linear-gradient(to right, #C373FA, #8DBFEF); /*设置渐变的方向从左到右 颜色从ff0000到ffff00*/
				-webkit-background-clip: text;/*将设置的背景颜色限制在文字中*/
				-webkit-text-fill-color: transparent;/*给文字设置成透明*/
        }
        .tips{
           font-size: 24px;
           color: #582204;
           margin: 40px auto 10px;
          }
          .line{
            width: 100%;
            height: 1px ;
            background: #353535;
            margin-top: 40px;
          }
        .cont{
          display: flex;
          align-items: center;
          justify-content: space-between;
          width: 100%;
          .left{
            font-size: 24px;
            color: #FFFFFF;
            opacity: 0.6;
          }
          .right{
            .sinput{
              width:220px;
              border-radius: 100px;
              height: 64px;
              background: #2A2A2A;
              display: flex;
              align-items: center;
              justify-content: center;
              cursor: pointer;
              .txt{
                color: #717171;
                margin-right: 16px;
              }
            }
          }
          .input{
            display: flex;
            align-items: center;
            justify-content: space-between;
            width: 100%;
            background: #2A2A2A;
            border-radius: 100px;
            height: 64px;
            padding: 8px 20px 8px 30px;
            box-sizing: border-box;     
            margin: 32px 0;       
            .yinput{
              border: none;
              background: transparent;
              color: #ffffff;
              font-size: 28px;
              font-weight: bold;
            }
            .dw{
              display: flex;
              align-items: center;
              .tt{
                color: #ffffff;
                font-size: 28px;
                font-weight: bold;
                margin:  0 10px;                
                white-space: nowrap;
              }
              .ico{
                width: 40px;
                height: 40px;
              }
            }
          }
          .icos{
            font-size: 36px;
            color: #ffffff;
          }
          .rbox{
            display: flex;
            align-items: center;
            justify-content: center;
            .num{
          //  margin: 22px auto;
        font-size: 32px;
        color: #ffffff;
          // background: linear-gradient(270deg, #F89C8A, #fb575f);
        // -webkit-background-clip: text;
        // -webkit-text-fill-color: transparent;
        }
            .txt{
              color: #ffffff;
                font-size: 24px;
                font-weight: bold;
                margin:  0 10px;
            }
            .ico{
              width: 40px;
              height: 40px;
            }
          }

         
          .ibox{
            border: 2px solid #582204 ;
            // background: #0000008c;
           border-radius: 26px;
            width: calc(100% - 16px);
            margin-top: 40px;
            padding: 30px 40px;
            box-sizing: border-box;
       margin: 0 auto;
            .txts{
              color: #ffffff;
              font-size: 24px;
              margin-bottom: 20px;
            }
          }
          .flex{
     display: flex;
    align-items: center;
    justify-content: space-between;
    .txts{
      margin: 0;
    }
          }
        
      

        }
      }
      .buttom{
        display: flex;
        width: 100%;    
        margin: 30px auto; 
        .fuzhi {
        background: transparent;
        border: none;
      } 
        .btn{
         background: #2A2A2A;
          color: #582204;
          border: none;
          border-radius: 40px;
          height: 112px;
          width: 100%;
          font-size: 32px;
          font-weight: bold;
        }
        .act{
          color: #ffffff;
          background: #FF7C36;
          // background: linear-gradient(188.1deg, rgb(175, 57, 239) 18.52%, rgb(139, 61, 206) 71.67%);
        }
      }
        
       

       
        .ttx{
          font-size: 36px;
          font-family: $t-f;
          font-weight: 600;
          color: #ffffff;
          line-height: 50px;
          text-align: center;
        }
      
        
      .title{
        font-size: 36px;
font-family: $t-f;
font-weight: 600;
color: #000000;
line-height: 50px;
text-align: left;
      }
      
    }
       
    }
.list{
    margin: 20px 0px 20px;
    overflow: auto;
    box-sizing: border-box;
    width: 100%;
     ::v-deep.van-list{
      height: 100vh;
    overflow: auto;
    }
    .title{
      font-weight: 600;
      font-size: 28px;
      margin: 20px auto;
      text-align: center;
      width: 200px;
      padding: 10px;
      border-radius: 30px 0;
      color:#ffffff;
          border: 2px solid #62e187;
    }
    .list-top {
      display: flex;
      align-items: left;
      justify-content: space-between;
      margin: 50px 0 0;
      border-top: 1px solid #f8f8f8;
      border-bottom: 1px solid #f8f8f8;
      padding: 30px 30px 30px;
      div {
        font-size: 24px;
        font-family: $t-mf;
        font-weight: 600;
        color: #8b8b93;
        line-height: 34px;
        text-align: left;
        white-space: nowrap;
        margin: 0 5px;
      }
    }
    .tops{
            display: flex;
            align-items: center;
            justify-content: space-between;
            width: 100%;
            
            .time{
              font-size: 26px;
              color: #6a6a6a;
              overflow: hidden;
              display: flex;
              align-items: center;

              .ico{
                width: 24px;
                margin-left: 5px;
              }
            }
            .no{
              border-radius: 56px;
              color:#6a6a6a;
              padding:10px 20px;
              font-size: 28px;
            }
          }
    .moshow{
      border-radius: 18px;
      margin: 16px auto;
      overflow: hidden;
      padding: 0 0 16px ;
      .mbox{
        display: table;
        justify-content: space-between;
        align-items: flex-start;
        margin-top: 16px;
        border-spacing: 20px;
        border-collapse: separate;
        width: 100%;
      }
      .items{
         border-radius: 26px;
        min-height: 160px;
        overflow: hidden;
        width: 50% ;
        display: table-cell;
        align-items: center;
        justify-content: center;
        flex-direction: column;
        margin: 8px ;
        padding: 40px 10px;
        box-sizing: border-box;
        border: 2px solid #582204;
        .txt{
          font-size: 26px;
          color: #A6A6A6;
        }
        .num{
          font-size: 24px;
        color: #ffffff;
        margin-top: 16px;
        }
      }
      .actc{
        border: 1px solid #fa605a;
      }
      .m16{
        margin: 8px 16px 8px 8px;
      }
    }

    .list-item {
      width: 100%;
      min-height: 50vh;
      .van-list{
        min-height: 50vh;
      }
     .sitem{
      border: 2px solid #582204;
      padding: 10px 20px;
      border-radius: 40px; 
      margin: 20px 0px 20px;
       
     }
     .acts{
      border: 2px solid #FF7C36;
      .tops{
        .no{
          color: #FF7C36;
        }
        .time{
          color: #FF7C36;
        }
      }
     }
        }
  }
}
  </style>
